<template>
  <div class="w100">
    <div class="topBox add_btn_top">
      <el-button type="primary" size="mini" @click="editDetails"
        ><i class="el-icon-edit"></i>编辑
      </el-button>
      <el-button @click="closePage" class="addButton" size="mini"
        >关闭
      </el-button>
    </div>
    <div class="details_box">
      <el-form
        style="height: 100%"
        :model="details"
        ref="form"
        label-width="120"
        :inline="false"
        size="normal"
        class="w100"
        label-position="left"
      >
        <el-row :gutter="10" class="w100" style="height: 100%">
          <el-col :span="4" :offset="0">
            <el-form-item label="零件号:">
              <!-- {{ details.partNumber }} -->
              <TextTooltip :content="details.partNumber"></TextTooltip>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="零件名称:">
              <!-- {{ details.partName }} -->
              <TextTooltip :content="details.partName"></TextTooltip>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="委托工序号:">
              {{ details.entrustProcessNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="委托工序名称:">
              {{ details.entrustProcessName }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="工序/工步号:">
              <TextTooltip :content="details.processNumber"></TextTooltip>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="工序/工步名称:">
              <!-- {{ details.processName }} -->
              <TextTooltip :content="details.processName"></TextTooltip>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="工序版次:">
              {{ details.processVersion }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4" :offset="0">
            <el-form-item label="工步号:">
              {{ details.stepNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="工步名称:">
              {{ details.stepName }}
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="4" :offset="0">
            <el-form-item label="工步名称:">
              {{ details.stepName }}
            </el-form-item>
          </el-col> -->
          <el-col :span="4" :offset="0">
            <el-form-item label="材料牌号:">
              {{ details.materialMark }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="模板:" v-if="details.technologyTemplate">
              {{ details.technologyTemplate.name }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="启用状态:">
              <span
                :style="
                  details.state == 'false'
                    ? 'color: #F56C6C;'
                    : 'color: #67C23A'
                "
              >
                {{ formatState(details.state) }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="有效期:">
              {{ details.endDate | formatDate }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="创建人:">
              {{ details.author }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="创建时间:">
              {{ details.createdDate | formatDate }}
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item label="更新时间:">
              {{ details.updatedDate | formatDate }}
            </el-form-item>
          </el-col>

          <el-col
            :span="4"
            :offset="0"
            v-for="item in technologyParameter"
            :key="item.key"
          >
            <el-form-item :label="item.key + ':'">
              <TextTooltip :content="item.value"></TextTooltip>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="height: 58%">
      <el-table
        :data="tabList"
        border
        height="100px"
        v-adaptive="{ bottomOffset: 50 }"
        style="margin-top: 10px"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="width: 100%">
              <el-table
                max-height="500px"
                min-height="100%"
                border
                v-if="props.row && props.row.formulaParameter.length"
                size="mini"
                :data="props.row.formulaParameter[0].keys"
                style="width: 100%"
              >
                <el-table-column label="内容\名称" align="center">
                  <template slot-scope="scope">
                    {{ scope.row }}
                  </template>
                </el-table-column>
                <el-table-column
                  v-for="(item, index) in props.row.formulaParameter"
                  :key="index"
                  :label="'阶段' + (index + 1)"
                  align="center"
                >
                  <template slot-scope="scope1">
                    {{ item.texts[scope1.$index] }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="55">
        </el-table-column>

        <!-- <el-table-column
          prop="version"
          label="工艺版次"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="processVersion"
          label="工序版次"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="entrustProcessNumber"
          label="委托工序号"
        ></el-table-column>
        <el-table-column
          prop="processNumber"
          label="工序/工步号"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="processName"
          label="工序/工步名称"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="materialMark"
          label="材料牌号"
        ></el-table-column>
        <!-- <el-table-column
          prop="stepNumber"
          label="工步号"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="stepName"
          label="工步名称"
          align="center"
        ></el-table-column> -->

        <el-table-column
          :show-overflow-tooltip="true"
          prop="createdDate"
          label="模板名称"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.technologyTemplate">
            {{ scope.row.technologyTemplate.name }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="启用状态" align="center">
          <template slot-scope="scope">
            <span
              :style="
                scope.row.state == 'false'
                  ? 'color: #F56C6C;'
                  : 'color: #67C23A'
              "
            >
              {{ formatState(scope.row.state) }}
            </span>
          </template></el-table-column
        >
        <el-table-column label="设备" align="center" width="120">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.deviceInfoList.length">
              <el-table
                :data="scope.row.deviceInfoList"
                border
                size="small"
                style="width: 100%"
              >
                <el-table-column
                  show-overflow-tooltip
                  width="100"
                  property="deviceTypeName"
                  label="设备类型"
                  align="center"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  width="200"
                  align="center"
                  property="name"
                  label="设备编号"
                >
                  <template slot-scope="scope">
                    <div class="flex-y flex-center">
                      <el-tag
                        class="dev_list_item"
                        size="small"
                        v-for="(device, index) in scope.row.deviceList"
                        :key="index"
                        >{{ device.deviceName }}</el-tag
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" size="small">
                设备信息<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </el-popover>
            <el-button size="small" v-else disabled> 暂无设备信息 </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="endDate"
          label="有效期"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.endDate | formatDate }}
          </template>
        </el-table-column>

        <el-table-column
          prop="author"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createdDate"
          label="创建时间"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.createdDate | formatDate }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="110">
          <!-- eslint-disable-next-line -->
          <template slot="header" slot-scope="scope">
            <div class="flex-x flex-space w100">
              <div>操作</div>
              <el-button type="primary" size="mini" @click="handleAdd"
                >添加</el-button
              >
            </div>
          </template>
          <template slot-scope="scope" v-if="scope.row.token">
            <div class="table_btns flex-x flex-space" style="padding: 0 10px">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit-outline"
                @click="handEdit(scope.row.token, scope.$index)"
              ></el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="handDelete(scope.row.token, scope.$index)"
              ></el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-view"
                @click="handNavTo(scope.row.token)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <Pagination
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
    </div>
    <AddDialog
      :details="details"
      :isTechnoNavto="isTechnoNavto"
      :templateList="templateList"
      :key="generateId"
      :token="editToken"
      :showDialog.sync="showDialog"
      :isedit="isedit"
      :title="title"
      @closeDialog="closeDialog"
      ref="dialogRef"
    ></AddDialog>
    <FormulaAddDialog
      :templateList="templateList"
      :key="formulaGenerateId"
      :token="formulaToken"
      :showDialog.sync="formulaShowDialog"
      :isedit="true"
      @closeDialog="closeDialog"
      ref="addDialogRef"
    ></FormulaAddDialog>
  </div>
</template>

<script>
import { spareParts } from "@/utils/local";
import TextTooltip from "@/components/TextTooltip";
import {
  getTechnologyToken,
  getFormulass,
  delFormulass,
  getTemplate
} from "@/api/technology";
import AddDialog from "./AddDialog2.vue";
import FormulaAddDialog from "./AddDialog.vue";
import _ from "lodash";
import { generateId } from "@/utils";
import Pagination from "@/views/common/page";
export default {
  components: {
    AddDialog,
    Pagination,
    FormulaAddDialog,
    TextTooltip
  },
  data() {
    return {
      formulaToken: "",
      formulaShowDialog: false,
      title: "主工艺",
      isedit: false,
      isTechnoNavto: false,
      details: {},
      generateId: generateId(),
      formulaGenerateId: generateId(),
      token: "",
      showDialog: false,
      tabList: [],
      templateList: [],
      editToken: "",
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0
    };
  },
  computed: {
    technologyParameter() {
      if (this.details.technologyParameter) {
        return this.details.technologyParameter.filter(
          item => !spareParts.includes(item.key)
        );
      }
    },
    formatState() {
      return function(data) {
        if (data == "true") {
          return "可用";
        } else if (data == "false") {
          return "禁用";
        }
      };
    }
  },
  async mounted() {
    this.token = this.$route.query.token;

    // this.processNumber = this.$route.query.processNumber;
    this.init();
    await this.getTemplateList();
  },
  methods: {
    // 编辑配方
    editDetails() {
      this.formulaShowDialog = true;
    },
    //添加工艺
    handleAdd() {
      this.showDialog = true;
      this.isTechnoNavto = false;
      this.$nextTick(() => {});
    },
    //编辑工艺
    handEdit(token) {
      this.showDialog = true;
      this.editToken = token;
      this.isedit = true;
    },
    closeDialog(isRefresh) {
      // isRefresh是否刷新
      if (isRefresh) {
        this.init();
      }
      this.showDialog = false;
      this.formulaShowDialog = false;
      this.isedit = false;
    },
    //获取模板列表
    getTemplateList() {
      return new Promise((resolve, reject) => {
        var params = {
          page: 1,
          pageSize: 0
        };
        getTemplate(params).then(res => {
          const { results } = res.data;
          this.templateList = results;
          resolve();
        });
      });
    },
    handNavTo(token) {
      this.$router.push({
        name: "formulaExhibitio",
        query: {
          token
        }
      });
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.initTab();
    },
    initTab() {
      getFormulass({
        technologyId: this.details.id,
        includeTemplate: true,
        // includeTechnology: true,
        page: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tabList = res.data.results;
        this.total = res.data.numResults;
      });
    },
    //删除
    handDelete(token) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delFormulass(token).then(res => {
            this.$msg({
              type: "success",
              message: "删除成功!"
            });
            this.init();
          });
        })
        .catch(c => {});
    },
    // 关闭页面
    closePage() {
      this.$router.replace({
        name: "recipeList"
      });
    },
    handleEdit() {
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs.dialogRef.form = _.cloneDeep({
          ...this.details,
          oldToken: this.token
        });
      });
    },
    async init() {
      const res = await getTechnologyToken(this.token);
      this.details = res.data;
      this.formulaToken = res.data.token + "_" + res.data.processVersion;
      this.initTab();
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dropdown-menu__item {
  border-bottom: 1px solid #e4e7ed;
}
.dev_list_item {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
@import "~@/styles/mixin.scss";
.details_box {
  padding: 30px;

  max-height: 240px;
  overflow-y: auto;
  background-color: #fff;
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
  .details_title {
    margin-right: 10px;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    width: 60px;
    text-align: right;
  }
  .description {
    width: auto;
    color: #666666;
    font-size: 14px;
    font-weight: 400;
  }
  .img_box {
    width: 207px;
    height: 207px;
    min-width: 207px;
    min-height: 207px;
    transition: all 0.6s;
    cursor: pointer;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
